<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组合式风格开发1</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  
<div id="app">

  <gx-hello></gx-hello>

  <button @click="addAge">{{age}} 岁</button>
  <p>{{ageFlag}}</p>

</div>
  
<script>
const { createApp, ref, computed, watch, onMounted } = Vue;

// 定义一个名为 GxHello 的组件
const GxHello = {
  template: '<h4>GxHello组件</h4>'
}

// 分别比较data、methods、computed、watch、声明周期、局部组件注册的写法

// 选项式风格
const App_Option = {
  // 组件注册
  components: {
    GxHello
  },
  // 组件创建时的生命周期钩子
  created(){
    console.log('已经创建')
  },
  // 组件挂载到DOM后的生命周期钩子
  mounted(){
    console.log('已挂载')
  },
  // 定义组件的数据
  data(){
    return {
      age: 24
    }
  },
  // 定义组件的方法
  methods: {
    addAge(){
      this.age++
    }
  },
  // 定义组件的计算属性
  computed: {
    ageFlag(){
      return this.age>=18?'成年人':'未成年';
    }
  },
  // 定义组件的监听器
  watch: {
    age:{
      handler(newVal){
        console.log('你当前的年龄：',newVal);
      },
      immediate: true, // 立即执行
      deep: true       // 深度监听
    }
  }
} 

// 组合式风格（推荐）
const App_Setup = {
  // 组件注册
  components: {
    GxHello
  },
  // 使用组合式API定义组件
  setup(){

    // 定义响应式数据
    const age = ref(24);

    // 定义方法
    const addAge = () => {
      age.value++;
    }

    // 定义计算属性
    const ageFlag = computed(() => {
      return age.value >= 18 ?'成年人':'未成年';
    })

    // 定义监听器
    watch(age, (newVal, oldVal) => {
      console.log('你当前的年龄：',newVal);
    }, {
      immediate: true,
      deep: true
    })

    // 定义挂载后的生命周期钩子
    onMounted(()=>{
      console.log('已挂载');
    })
    

    // 返回给模板使用的数据、方法和计算属性
    return {
      age,
      addAge,
      ageFlag
    }

  }
} 

// 创建Vue应用实例，使用选项式风格
const app = createApp(App_Option);  // 选项式
// 创建Vue应用实例，使用组合式风格
// const app = createApp(App_Setup); // 组合式

// 将Vue应用实例挂载到DOM元素上
const vm = app.mount('#app');

</script>
</body>
</html>